<template>
  <div>
    <sui-container style="padding: 50px">
      <h2 is="sui-header">
        Card
        <a href="http://localhost:8080/" is="sui-button" style="float: right ">主页</a>
      </h2>
      <sui-divider/>
      <div is="sui-card" class="centered">
        <sui-image src="https://semantic-ui-vue.github.io/static/images/avatar/large/kristy.png"/>
        <sui-card-content>
          <sui-card-header>Girl</sui-card-header>
          <sui-card-meta>I am a girl</sui-card-meta>
          <sui-card-description>Do you want to know more about me?</sui-card-description>
        </sui-card-content>
        <sui-card-content extra>
          <span>
            <sui-icon name="like"/>
            喜欢
          </span>
          <span style="float: right">
            <sui-icon name="user"/>
            好友
          </span>
        </sui-card-content>
      </div>
      <sui-divider/>
      <div is="sui-card-group" class="doubling four">
          <sui-card>
            <sui-image src="https://semantic-ui-vue.github.io/static/images/avatar/large/kristy.png"/>
            <sui-card-content>
              <sui-card-header>Girl</sui-card-header>
              <sui-card-meta>I am a girl</sui-card-meta>
              <sui-card-description>Do you want to know more about me?</sui-card-description>
            </sui-card-content>
            <sui-card-content extra>
          <span>
            <sui-icon name="like"/>
            喜欢
          </span>
              <span style="float: right">
            <sui-icon name="user"/>
            好友
          </span>
            </sui-card-content>
          </sui-card>
          <sui-card>
            <sui-image src="https://semantic-ui-vue.github.io/static/images/avatar/large/kristy.png"/>
            <sui-card-content>
              <sui-card-header>Girl</sui-card-header>
              <sui-card-meta>I am a girl</sui-card-meta>
              <sui-card-description>Do you want to know more about me?</sui-card-description>
            </sui-card-content>
            <sui-card-content extra>
          <span>
            <sui-icon name="like"/>
            喜欢
          </span>
              <span style="float: right">
            <sui-icon name="user"/>
            好友
          </span>
            </sui-card-content>
          </sui-card>
          <sui-card>
            <sui-image src="https://semantic-ui-vue.github.io/static/images/avatar/large/kristy.png"/>
            <sui-card-content>
              <sui-card-header>Girl</sui-card-header>
              <sui-card-meta>I am a girl</sui-card-meta>
              <sui-card-description>Do you want to know more about me?</sui-card-description>
            </sui-card-content>
            <sui-card-content extra>
          <span>
            <sui-icon name="like"/>
            喜欢
          </span>
              <span style="float: right">
            <sui-icon name="user"/>
            好友
          </span>
            </sui-card-content>
          </sui-card>
          <sui-card>
            <sui-image src="https://semantic-ui-vue.github.io/static/images/avatar/large/kristy.png"/>
            <sui-card-content>
              <sui-card-header>Girl</sui-card-header>
              <sui-card-meta>I am a girl</sui-card-meta>
              <sui-card-description>Do you want to know more about me?</sui-card-description>
            </sui-card-content>
            <sui-card-content extra>
          <span>
            <sui-icon name="like"/>
            喜欢
          </span>
              <span style="float: right">
            <sui-icon name="user"/>
            好友
          </span>
            </sui-card-content>
          </sui-card>
      </div>
    </sui-container>
  </div>
</template>

<script>
export default {
  name: 'Card'
}
</script>

<style scoped>

</style>
